Application Structure

No matter how big or small, most React applications will share a common structure.

Here's an example of this structure. Take a few moments to poke around and see how everything works:

Code Playground

Open in CodeSandbox

import React from 'react';

import { createRoot } from 'react-dom/client';

import App from './components/App';

const root = createRoot(

document.querySelector('#root')

);

root.render(<App />);

Let's break down these files.

Index

The root index.js file is typically the first bit of code which will be executed. It's responsible for rendering our React application, turning the React elements we write into live DOM nodes.

In general, there will only be 1 spot in the entire codebase that calls the createRoot and render methods from react-dom. While it's possible to have multiple application roots, this is generally only done when progressively migrating to React, from another framework or technology stack.

It's common to do "setup" tasks in this file as well. For example, this file is a good place to import global CSS files, or set up any error-logging services.

Because index.js is more of a setup file than an active part of the application, we don't typically want to render a bunch of JSX here. It would be weird to include headers and buttons and footers here; that stuff happens in the app, and we're still setting up the app here.

Aside from some provider components (discussed later in the course), this file generally only renders a single element: <App />.

App

It's common for our projects to have a component called App, short for “Application”.

This is the “home base” React component in our project, the component that is an ancestor to every other component. Pick a random component in a React app, and you should be able to trace its lineage to App.

This component will sometimes manage "core" layout stuff, like headers and footers. In smaller applications, like the "hello world" one shown here, we're rendering additional UI in this component, though we tend not to see as much of that as the application grows in size.

If you're using a routing solution like React Router, our top-level routes are often included in this file.

Every project is different, and there are no hard rules for how to structure this component. The important thing is that App should show developers how the application is structured. It's a home base for developers to check, to get acquainted with how things work.

Modules

We generally use the ES module system to split our application into multiple files.

If you're not familiar with this import/export syntax, you can learn more about it in the “JavaScript Modules” lesson 👀 from the JavaScript Primer reference module.

Going forward

I wanted to share this quick lesson on application structure because we'll be using it in many of the sandboxes in this course, going forward!

For example, you might see something like this:

Code Playground

import FancyButton from './FancyButton';

function App() {

return (

Click me!

</FancyButton>

);

}

export default App;

To keep things focused and minimal, we aren't showing the index.js, with the createRoot and render() calls. Whenever it's not shown, you can assume it's rendering the App component.

There will also be some minimal styles included "covertly" in some of the sandboxes. If you're curious about how certain styles work, you can always inspect them in the browser developer tools!